<template>
	<view>
		<u-popup :show="review_show" @close="close" mode="center" :closeable="true" round="15">
			<view class="popup" style="padding: 40px 20px;">
				<u-textarea v-model="content" placeholder="请输入弹幕内容" count maxlength="50"></u-textarea>
				<u-button text="提交" :color="color_value" shape="circle" @click="submit" customStyle="margin-top: 30px;"></u-button>
			</view>
		</u-popup>

		<view v-if="danmulist.length>0" class='danmulist'>
			<block v-for="(item,index) in danmulist" :key="index">
				<view class='danmuitemConten' :animation="intervalindex==index?animationY:''">{{item}}</view>
			</block>
		</view>
		<view v-if="danmulist1.length>0" class='danmulist' style="bottom: 200rpx;">
			<block v-for="(item,index) in danmulist1" :key="index">
				<view class='danmuitemConten' :animation="intervalindex==index?animationY:''">{{item}}</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				color_value: 'common/color_value',
			})
		},
		name: 'review',
		props: {
			review_show: {
				type: Boolean,
				default: false
			},
			vote_id: {
				type: Number,
				default: 0
			},
			person_id: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				intervalindex: -1,
				animationY: {},
				danmulist: {},
				danmulist1: {},
				content: '',
				interval: null
			};
		},
		watch: {
			review_show(value) {
				if (value) {
					this.review_show = value;
				}
			},
			person_id(value) {
				if (value) {
					this.http('review/index', {
						vote_id: this.vote_id,
						person_id: this.person_id
					}, 'get').then(res => {
						var data = res.data;
						if (data) {
							if (data.length >= 40) {
								this.danmulist = data.slice(0, (data.length / 2));
								this.danmulist1 = data.slice(data.length / 2);
							} else {
								this.danmulist = res.data;
							}
							this.animationInit();
						}
					});
				}
			}
		},
		created() {
			
		},
		methods: {
			close() {
				this.$emit('close');
			},
			submit() {
				if (!this.content) {
					uni.$u.toast('请输入弹幕内容')
					return
				}
				let data = {};
				data.content = this.content;
				data.vote_id = this.vote_id;
				data.person_id = this.person_id;
				this.http('review/save', data, 'post').then(res => {
					uni.$u.toast('发送成功')
					clearTimeout(this.interval);
					this.intervalindex = -1;
					this.content = '';
					this.danmulist.splice(0, 0, data.content);
					this.animationInit();
					this.close();
				});
			},
			animationInit() {
				this.animationY = uni.createAnimation({
					duration: 1500,
					transformOrigin: "30% 30% 40%",
					timingFunction: "ease-in-out",
					delay: 0
				});
				this.animationY.scale(0.3, 0.3).step({
					transformOrigin: "0 0 0",
				})
				this.animationY.scale(1, 1)
					.opacity(1)
					.step({
						transformOrigin: "0 0 0",
					})
				this.animationY.translate(0, -80).step()
				this.animationY.opacity(0).step();
				this.animationY = this.animationY.export();
				var that = this
				this.interval = setTimeout(function(){that.doAnimatiom()}, 3000)
			},
			doAnimatiom() {
				var that = this
				if (this.danmulist.length > 0 && this.intervalindex < this.danmulist.length - 1) {
					this.intervalindex = ++this.intervalindex;
					this.interval = setTimeout(function(){that.doAnimatiom()}, 3000)
				} else {
					this.intervalindex = -1;
					this.interval = setTimeout(function(){that.doAnimatiom()}, 3000)
				}
			}
		}
	};
</script>

<style>
	.popup {
		width: 320px;
	}

	.dp_text {
		background-color: #fff;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.danmulist {
		position: fixed;
		height: 40rpx;
		bottom: 300rpx;
		left: 30rpx;
		background: rgba(255, 255, 255, 0);
		right: 100px;
		z-index: 99;
	}

	.danmuitemConten {
		padding: 0px 30rpx;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		border-radius: 10rpx;
		background: rgba(0, 0, 0, 0.8);
		color: #fff;
		opacity: 0;
		position: absolute;
		overflow: hidden;
	}
</style>
